<template>
  <div class="ui-loading" :class="['ui-loading--' + size, 'ui-loading--' + type, 'is-' + dir]">
    <span class="ui-loading__icon"></span>
    <span class="ui-loading__text" v-if="text">{{  text}}</span>
  </div>
</template>
<script>
export default {
  name: 'UiLoading',
  props: {
    type: {
      type: String,
      default: 'default',
      validator(value) {
        return ['default', 'primary', 'success', 'warning', 'danger', 'info'].includes(value)
      }
    },
    dir: {
      type: String,
      default: 'horizon',
      validator (value) {
        return ['horizon', 'vertical'].includes(value)
      }
    },
    text: {
      type: String
    },
    size: {
      type: String,
      default: 'small',
      validator(value) {
        return ['small', 'mini', 'medium'].includes(value)
      }
    }
  }
}
</script>
<style lang="less">
.ui-loading{
  &.is-horizon{
    display: flex;
    flex-direction: row;
    align-items: center;
    .ui-loading__icon{
      margin-right: 6px;
    }
  }
  &.is-vertical{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    .ui-loading__icon{
      margin-bottom: 6px;
    }
  }
}
.ui-loading__text{
  color: rgba(0,0,0,.5);
}
.ui-loading--medium {
  .ui-loading__icon{
    width: 24px;
    height: 24px;
    border-width: 6px;
  }
}
.ui-loading--small {
  .ui-loading__icon{
    width: 20px;
    height: 20px;
    border-width: 3px;
  }
}
.ui-loading--mini {
  .ui-loading__icon{
    width: 12px;
    height: 12px;
    border-width: 2px;
  }
}
.ui-loading--default {
  .ui-loading__icon{
    border-color: #999;
  }
}
.ui-loading--primary {
  .ui-loading__icon{
    border-color: #5f9efa;
  }
}
.ui-loading--success {
  .ui-loading__icon{
    border-color: #7ebf4a;
  }
}
.ui-loading--info {
  .ui-loading__icon{
    border-color: #999;
  }
}
.ui-loading--warning {
  .ui-loading__icon{
    border-color: #dba54a;
  }
}
.ui-loading--danger {
  .ui-loading__icon{
    border-color: #e3756f;
  }
}
.ui-loading__icon{
  display: inline-block;
  border-style: solid;
  border-color: #999;
  border-radius: 50%;
  border-right-color: transparent!important;
  animation: rotating .7s linear infinite;
}
@keyframes rotating{
  0% {
      transform: rotate(0);
  }
  100% {
      transform: rotate(1turn);
  }
}
</style>
